<script setup>
import {ref,computed,onMounted} from 'vue'
const el=ref()

const {zoom,ak}=defineProps({
  zoom:{
    type:[Number,String],
    default:13
  },
  ak:{
    type:String,
    default:'7d1a6efe535a021e0957e835953a795f'
  }
})

const model=defineModel()
const src=computed(()=>{
  if(model.value&&el.value) {
    let size = el.value.clientWidth + "*" + el.value.clientHeight
    return `https://restapi.amap.com/v3/staticmap?location=${model.value}&markers=large,,A:${model.value}&zoom=${zoom}&size=${size}&key=${ak}`
  }
  return ''
})
</script>
<template>
  <div class="amap-img" ref="el">
    <img  v-if="src" :src = "src" >
    <svg  v-else t="1727333773817" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13660" width="256" height="256"><path d="M574.777277 106.372679l-501.230726 0.114611c-7.780197 0-15.110139 1.551332-22.1116 3.882423l259.727393 259.727393L574.777277 106.372679z m0 0" fill="#DADBC9" p-id="13661"></path><path d="M8.003789 153.807015c-2.339278 7.000438-3.89061 14.33038-3.89061 22.10546l0.111541 501.237889 263.610839-263.72852L8.003789 153.807015z m0 0" fill="#C0DBB9" p-id="13662"></path><path d="M354.836029 413.744185l-43.345204 43.37488-0.317225-0.316201 43.348274-43.366694 0.314155 0.308015z m-43.673685-43.648102L51.330574 110.369713a68.883857 68.883857 0 0 0-43.326785 43.323715l259.83177 259.728416 43.326785-43.325761z m-43.326785 43.325761L4.22472 677.150364v86.643336l306.936601-307.047118-43.325762-43.324738z m86.650499 0l207.406771-207.513194 182.963055 182.964078 59.793827-28.404933-199.431121-197.88286 56.210209-56.322773-86.650499 0.110517-263.615956 263.723404 43.323714 43.325761z m0 0" fill="#FFFFFF" p-id="13663"></path><path d="M1020.690116 175.580924c0-38.324864-31.106462-69.433372-69.433372-69.433372l-289.828968 0.11461-56.21021 56.209186 197.512423 197.409069c76.764338-35.882232 150.746306-61.211107 218.072691-75.213006l-0.112564-109.086487z m0 0" fill="#ACC4A5" p-id="13664"></path><path d="M311.196113 456.746582l-43.366693-43.346227 43.345204-43.366694 43.374879 43.346227-43.35339 43.366694z m250.661923-250.767324l-34.175357-34.162054 43.346227-43.373857 34.182521 34.161031-43.353391 43.37488z m0 0" fill="#FFFFFF" p-id="13665"></path><path d="M744.855884 388.872728L561.892829 205.90865 354.486058 413.421844l0.338715 0.336668-43.326785 43.324738-0.336667-0.336668L4.22472 763.7937v34.3309c3.996011-5.441942 6.55223-8.776897 6.552229-8.776898s268.278139-169.966043 309.048705-217.398332c23.775496-27.66713 97.092315-20.441565 156.307975-2.338254 24.321942-20.216437 49.5403-40.207747 75.872015-59.539025 64.095807-47.103808 129.083937-87.542822 192.85024-121.199363z m0 0" fill="#DADBC9" p-id="13666"></path><path d="M722.750423 817.006645c-31.106462 30.439266-41.10621 73.876568-43.437301 106.978477h87.206154c-0.225127-45.769416-1.559519-148.302651-43.768853-106.978477z m0 0" fill="#EAEADC" p-id="13667"></path><path d="M764.741793 726.4727C739.301378 706.585767 569.335335 652.482545 558.33991 616.045681c-11.003612-36.435841-197.632149-91.537809-238.514256-44.097334-40.770566 47.433312-309.048705 217.398332-309.048705 217.398332s-2.556219 3.440355-6.552229 8.776897v56.540738c0 38.324864 31.107485 69.432349 69.434395 69.432348h5.103228c61.099566-63.765279 155.191548-131.415029 228.845035-151.299914 98.201579-26.438139 60.769039-90.541109 177.74624-91.650373 116.971062-1.109264 156.74288 134.638443 160.078859 175.519526 1.9934 25.216311-3.448542 47.882544-7.781221 67.207681h41.549302c2.331092-33.101909 12.44238-76.53921 43.437302-106.972337 42.215474-41.331337 43.542702 61.315484 43.655265 106.972337h63.210647c-2.555196-127.412878-40.655955-178.51986-64.761979-197.400882z m0 0" fill="#8DC6FF" p-id="13668"></path><path d="M78.87593 924.096662h100.645235c20.995173-43.437302 49.105395-88.869027 83.763752-134.749983-64.208371 29.330002-135.087675 83.20298-184.408987 134.749983z m210.517621 0l348.371292-0.11154c4.220115-19.324114 9.775644-41.990347 7.774058-67.206658-3.216251-39.323611-40.101323-166.412101-147.080824-174.964894-87.977727 79.431074-159.076018 162.745594-209.064526 242.283092z m0 0" fill="#EAEADC" p-id="13669"></path><path d="M1020.803703 373.206934c-47.216371 14.219863-96.762811 33.438577-147.642618 57.102532-19.107173 8.994861-38.438451 18.551518-57.875129 28.880771-63.765279 33.662681-128.753409 74.208119-192.737676 121.19834-20.111037 14.774495-39.442314 29.773094-58.32436 45.101197 32.440853 35.769668 177.183422 82.759889 200.405309 100.982926 24.107047 18.881023 62.207807 69.988004 64.875567 197.399858h121.977075c38.325887 0 69.426209-31.101345 69.426209-69.426209l-0.104377-481.239415z m0 0" fill="#C0DBB9" p-id="13670"></path><path d="M1020.803703 373.206934V284.778952c-67.326385 14.001899-141.309376 39.32975-218.072691 75.213005l70.430073 70.430073c50.768267-23.77652 100.426247-42.883693 147.642618-57.215096z m0 0M552.118208 509.958504c-26.444279 19.443841-51.661613 39.323611-75.878155 59.545165-85.316108 70.984704-157.412123 146.07696-212.954113 219.730446-34.659381 45.99352-62.768579 91.425246-83.763752 134.751007h109.872386c49.989531-79.537498 121.086799-162.739455 209.063503-242.284115 20.996197-18.995633 42.995233-37.771255 65.87943-56.211233 18.882046-15.216563 38.214347-30.327726 58.32436-45.101197 63.983243-47.102784 128.971373-87.535659 192.737676-121.19834l-70.429049-70.430072c-63.880913 33.769105-128.869043 74.208119-192.852286 121.198339z m0 0" fill="#FAD350" p-id="13671"></path><path d="M873.160061 430.421007l-70.430072-70.430073c-19.10615 8.994861-38.438451 18.551518-57.875129 28.768207l70.430073 70.430073c19.437701-10.215666 38.768979-19.884886 57.875128-28.768207z m0 0" fill="#FAD350" p-id="13672"></path><path d="M437.318602 381.801682c-2.700505-6.431479-4.844332-13.187347-6.511297-20.175505 1.190105 6.828522 3.332908 13.583366 6.511297 20.175505z m124.233466 82.851987c-45.989427 0-86.580914-23.11751-110.812805-58.310034l19.064194 34.555004 65.219398 118.278847c11.357675 20.570501 40.98546 20.570501 52.342112 0l65.21735-118.278847 16.600073-30.181393c-24.541953 32.726356-63.62304 53.936423-107.630322 53.936423z m0 0" fill="#FC4B35" p-id="13673"></path><path d="M561.552068 195.687868c-74.268494 0-134.480854 60.211337-134.480854 134.481877 0 10.880815 1.350764 21.363564 3.736091 31.456432 1.666966 6.909363 3.810792 13.663184 6.511297 20.175505a80.06757 80.06757 0 0 0 1.828648 3.65525l11.517311 20.886703c24.226774 35.192523 64.816215 58.310034 110.808712 58.310034 44.00319 0 83.08837-21.210068 107.636463-53.861722 16.83441-22.478967 26.845415-50.359968 26.845414-80.622202 0.080841-74.270541-60.130496-134.481877-134.403082-134.481877z m-0.316202 203.585744c-33.758871 0-61.164035-27.405163-61.164035-61.160964 0-10.483772 2.62171-20.336164 7.305383-28.995382 6.277984-15.962553 19.385513-28.515451 35.823904-33.917483a58.297754 58.297754 0 0 1 18.035771-2.858095c6.351662 0 12.31242 1.028423 18.032702 2.858095 16.281825 5.322216 29.306466 17.712407 35.664268 33.439599 4.764514 8.742105 7.544837 18.749016 7.544836 29.392424-0.079818 33.837666-27.484981 61.241806-61.242829 61.241806z m0 0" fill="#FC4B35" p-id="13674"></path><path d="M618.985128 330.169745c0 31.934317-25.89988 57.827033-57.830103 57.827033-31.931247 0-57.824987-25.89374-57.824987-57.827033a57.635675 57.635675 0 0 1 3.972475-21.051455c-4.690836 8.659217-7.312546 18.511609-7.312546 28.995381 0 33.755802 27.405163 61.160965 61.164035 61.160965 33.757848 0 61.163011-27.405163 61.163011-61.160965 0-10.643408-2.701528-20.651342-7.54586-29.393447a56.408731 56.408731 0 0 1 4.213975 21.449521z m0 0" fill="#E43D2A" p-id="13675"></path></svg>
  </div>
</template>
<style>
.amap-img{
  width: 350px;
  height: 200px;
}
</style>
